<template>
  <el-select
    v-bind="$attrs"
    v-model="syncValue"
    :clearable="clearable"
    :fit-input-width="fitInputWidth"
    :teleported="teleported"
    :append-to="appendTo"
    @visible-change="visibleChange"
  >
    <template v-if="group === true">
      <el-option-group
          v-for="group in options || []"
          :key="group[propsMerge.label]"
          :label="group[propsMerge.label]"
          :disabled="group[propsMerge.disabled]"
      >
        <el-option
            v-for="item in group.children || []"
            :disabled="item[propsMerge.disabled]"
            :key="item[propsMerge.value]"
            :label="item[propsMerge.label]"
            :value="item[propsMerge.value]">
          <template #default>
            <slot v-bind="item"></slot>
          </template>
        </el-option>
      </el-option-group>
    </template>
    <template v-else>
      <el-option
          v-for="item in options || []"
          :disabled="item[propsMerge.disabled]"
          :key="item[propsMerge.value]"
          :label="item[propsMerge.label]"
          :value="item[propsMerge.value]">
        <template #default>
          <slot v-bind="item"></slot>
        </template>
      </el-option>
    </template>
    <template #prefix v-if="$slots.prefix">
      <slot name="prefix"></slot>
    </template>
    <template #empty v-if="$slots.empty">
      <slot name="empty"></slot>
    </template>
  </el-select>
</template>

<script lang="ts">
import {PropType} from "vue";
import {defaultProps, Props} from "../CommonTypes";

export default {
  name: "ElSelectPlus",
  props: {
    modelValue:{
      type: String,
      default: ''
    },
    options:{
      type:Array as PropType<Array<any>>,
      default:()=>[]
    },
    props: {
      type: Object as PropType<Props>,
      default: (): Props => {
        return defaultProps
      }
    },
    group:{
      type:Boolean,
      default: false
    },
    clearable:{
      type:Boolean,
      default: false
    },
    fitInputWidth:{
      type:Boolean,
      default: true
    },
    teleported:{
      type:Boolean,
      default: true
    },
    appendTo:{
      type:Object as PropType<string | HTMLElement>,
      default: undefined
    },
  },
  emits:[
    'visible-change',
    'update:modelValue'
  ],
  computed:{
    propsMerge() {
      return Object.assign({},defaultProps, this.props)
    },
    syncValue:{
      get(){
        return this.modelValue
      },
      set(val){
        this.$emit('update:modelValue',val)
      }
    }
  },
  methods: {
    visibleChange(visible: boolean) {
      this.$emit('visible-change',visible)
    },
  }
}
</script>

<style scoped lang="scss">

</style>
